<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条实例</title>
    <style>
        body{
            padding: 30px;
        }
        #hd{
            height: 30px;
            background: yellowgreen;
            width: 0;
            text-align: right;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="hd"></div>
</body>
<script>
    // function view(){
    //     let i = 0;
    //     //立即执行
    //     (function handle(){
    //         hd.innerHTML = i + '%';
    //         hd.style.width= i + "%";
    //         i++;
    //         if(i <= 100){
    //             setTimeout(handle,20);
    //         }
    //     })();
    // }
    // view();
    // //先执行同步任务
    // console.log('定时器开始了');



    // function view(dealy=20){
    //     let i = 0;
    //     (function a(){
    //         if(i++ < 100){
    //             hd.innerHTML = i + '%';
    //             hd.style.width = i + '%';
    //             setTimeout(a,dealy);
    //         }
    //     })();
    // }

    // view(10);


    // function view(dealy){
    //    let i = 0;
    //    let timeId = setInterval(() => {
    //        i++;
    //         hd.innerHTML = i + '%';
    //         hd.style.width = i + '%';
    //         if(i == 100){
    //             clearInterval(timeId);
    //         }
    //    },dealy);
    // }

    view(50);
</script>
</html>